<template>
  <view class="pet-page">
    <!-- 宠物卡片 -->
    <view class="pet-card">
      <view class="pet-avatar-container">
        <image src="/static/images/golden-dog.png" 
               mode="aspectFill" 
               class="pet-avatar"></image>
        <view class="camera-btn">
          <text class="iconfont">📷</text>
        </view>
      </view>
      <view class="pet-basic-info">
        <text class="pet-name">小金毛</text>
        <text class="pet-breed">金毛寻回犬 · 2岁</text>
        <view class="pet-tags">
          <text class="tag">已绝育</text>
          <text class="tag">已驱虫</text>
          <text class="tag">已接种</text>
        </view>
      </view>
      <view class="view-detail-btn" @tap="goToPetDetail">
        <text class="btn-text">查看详情</text>
        <text class="iconfont">→</text>
      </view>
    </view>

    <!-- 今日健康 -->
    <view class="today-health">
      <view class="section-header">
        <text class="section-title">🏃 今日健康</text>
        <text class="more-text">更多 →</text>
      </view>
      <view class="health-grid">
        <view class="health-item">
          <text class="health-label">步数</text>
          <text class="health-value">3,245</text>
          <text class="health-unit">步</text>
        </view>
        <view class="health-item">
          <text class="health-label">饮水</text>
          <text class="health-value">850</text>
          <text class="health-unit">ml</text>
        </view>
        <view class="health-item">
          <text class="health-label">卡路里</text>
          <text class="health-value">1,280</text>
          <text class="health-unit">kcal</text>
        </view>
        <view class="health-item">
          <text class="health-label">睡眠</text>
          <text class="health-value">12</text>
          <text class="health-unit">小时</text>
        </view>
      </view>
    </view>

    <!-- 饮食记录 -->
    <view class="diet-record">
      <view class="section-header">
        <text class="section-title">🍖 饮食记录</text>
        <view class="add-btn" @tap="addDiet">
          <text class="iconfont">+</text>
        </view>
      </view>
      <view class="diet-list">
        <view class="diet-item" v-for="(item, index) in dietRecords" :key="index">
          <view class="diet-time">{{ item.time }}</view>
          <view class="diet-content">
            <text class="diet-name">{{ item.name }}</text>
            <text class="diet-amount">{{ item.amount }}</text>
          </view>
          <text class="diet-calories">{{ item.calories }}</text>
        </view>
      </view>
    </view>

    <!-- 运动记录 -->
    <view class="exercise-record">
      <view class="section-header">
        <text class="section-title">💪 运动记录</text>
      </view>
      <view class="exercise-list">
        <view class="exercise-item" v-for="(item, index) in exercises" :key="index">
          <view class="exercise-icon">{{ item.icon }}</view>
          <view class="exercise-info">
            <text class="exercise-name">{{ item.name }}</text>
            <text class="exercise-duration">{{ item.duration }}</text>
          </view>
          <text class="exercise-calories">{{ item.calories }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const dietRecords = [
  { time: '早餐 08:00', name: '狗粮', amount: '150g', calories: '420kcal' },
  { time: '午餐 12:30', name: '鸡胸肉+蔬菜', amount: '200g', calories: '380kcal' },
  { time: '晚餐 18:00', name: '狗粮', amount: '150g', calories: '420kcal' }
]

const exercises = [
  { icon: '🚶', name: '散步', duration: '30分钟', calories: '120kcal' },
  { icon: '▶️', name: '玩耍', duration: '20分钟', calories: '80kcal' },
  { icon: '😴', name: '睡眠', duration: '12小时', calories: '-' },
  { icon: '💗', name: '心率', duration: '75次/分', calories: '-' }
]

const goToPetDetail = () => {
  uni.navigateTo({
    url: '/pages/pet-detail/pet-detail'
  })
}

const addDiet = () => {
  uni.showToast({
    title: '添加饮食记录',
    icon: 'none'
  })
}
</script>

<style scoped>
.pet-page {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 32rpx;
  padding-bottom: 120rpx;
}

/* 宠物卡片 */
.pet-card {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
}

.pet-avatar-container {
  position: relative;
  margin-right: 24rpx;
}

.pet-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 8rpx solid #89CFF0;
}

.camera-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: #B7F0AD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.pet-basic-info {
  flex: 1;
}

.pet-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 8rpx;
}

.pet-breed {
  font-size: 28rpx;
  color: #999999;
  display: block;
  margin-bottom: 16rpx;
}

.pet-tags {
  display: flex;
  gap: 12rpx;
}

.tag {
  background-color: #89CFF020;
  color: #89CFF0;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
}

.view-detail-btn {
  background-color: #89CFF0;
  color: #FFFFFF;
  padding: 16rpx 24rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.btn-text {
  margin-right: 8rpx;
}

/* 通用区块样式 */
.today-health,
.diet-record,
.exercise-record {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.more-text {
  font-size: 28rpx;
  color: #999999;
}

.add-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: #89CFF0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

/* 健康数据网格 */
.health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
}

.health-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
  background-color: #F8F9FA;
  border-radius: 16rpx;
}

.health-label {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 8rpx;
}

.health-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #89CFF0;
  margin-bottom: 4rpx;
}

.health-unit {
  font-size: 20rpx;
  color: #999999;
}

/* 饮食列表 */
.diet-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.diet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background-color: #F8F9FA;
  border-radius: 16rpx;
}

.diet-time {
  font-size: 24rpx;
  color: #999999;
  width: 140rpx;
}

.diet-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.diet-name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 4rpx;
}

.diet-amount {
  font-size: 24rpx;
  color: #999999;
}

.diet-calories {
  font-size: 28rpx;
  color: #B7F0AD;
  font-weight: bold;
}

/* 运动列表 */
.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.exercise-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #F8F9FA;
  border-radius: 16rpx;
}

.exercise-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 16rpx;
}

.exercise-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exercise-name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 4rpx;
}

.exercise-duration {
  font-size: 24rpx;
  color: #999999;
}

.exercise-calories {
  font-size: 28rpx;
  color: #89CFF0;
  font-weight: bold;
}
</style>